.warpper {
  box-shadow: 0 4px 13px -3px rgb(0 0 0 / 10%);
  border-bottom: 1px solid #d2d2d2;
  padding: 0 26px 0 22px;
  backdrop-filter: saturate(180%) blur(0.4rem);
  background-color: hsla(0, 0%, 100%, 0.75);
  position: fixed;
  z-index: 1;
  width: 100%;
}

.inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
}

.menus {
  display: flex;
  a {
    transition: all 0.3s;
    color: #333;
    border-radius: 3px;
    padding: 2px 8px 2px 8px;
    display: flex;
    align-items: center;
  }
  a + a {
    margin-left: 6px;
  }
  :global(.active),
  a:hover {
    background: #00000017;
    color: #0366d6;
  }
}

.logo {
  display: flex;
  align-items: center;
  color: #333;
  img {
    margin-right: 8px;
    height: 38px;
  }
}

.title {
  display: flex;
  flex-direction: column;
  line-height: 14px;
  font-weight: bold;
  padding-left: 8px;
  > :first-child {
    font-size: 18px;
  }
  > :last-child {
    margin-bottom: -10px;
    font-size: 12px;
    color: #9a9a9a;
    font-weight: 300;
  }
}
